<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    ul {
        padding: 0;
        margin: 0;
    }

    li {
        height: 60px;
        list-style: none;
        text-align: left;
        border: 1px solid;
        margin: 10px 5px;
        border-radius: 5px;
        line-height: 60px;
    }

    div {
        padding: 10px;
        width: 300px;
        border: 2px solid;
        margin: 20px auto;
        text-align: center;
        border-radius: 10px;
    }

    h1 {
        margin: 0;
    }

    h2 {
        margin: 0;
    }
</style>

<body>
    <div class="goods">
        <h1>商品列表</h1>
        <input type="text" class="suo">
        <button onclick="suo()">搜索</button><br>
        全选：<input type="checkbox" name="" id="goods_quan">
        <ul class="sp">
        </ul>
    </div>
    <div class="Shopping trolley">
        <h1>购物车</h1>
        <button onclick="del()">清空购物车</button><br>
        全选：<input type="checkbox" name="" id="trolley_quan">
        <ul class="gw">
            <li>
                <input type="checkbox" id="" class="xuan">
                <img src="" alt="">
                <span></span>
                <span></span>
                <button onclick="sub()">-</button>
                <span class="shu"></span>
                <button onclick="add()">+</button>
                <button onclick="rem()">删除</button>
            </li>
        </ul>
        <h2>总价：</h2><button onclick="sett()">结算</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        //数据
        var arr1 = [{
            id: 1,
            img: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.AnXtS_WpWp8R4IG4APme8QHaHa?w=185&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
            name: '按摩椅',
            price: 200,

        }, {
            id: 2,
            img: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.8kchIIvIK-c0B8jKzdRORwHaHa?w=196&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
            name: '五粮液',
            price: 500,

        }, {
            id: 3,
            img: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.RC05O87J0UlddMtw7GcC1gHaE7?w=295&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
            name: '手表',
            price: 100,

        },]
        var arr2 = []
        //渲染
        function rendering() {
            $('.sp').html('')
            $('.gw').html('')
            var jg = 0
            arr1.forEach((item) => {
                $('.sp').append(`
                 <li>
                    <input type="checkbox" id="" class="spxuan">
                    <img src="${item.img}" alt="">
                    <span>${item.name}</span>
                    <span>${item.price}元</span>
                    <button onclick="jia(${item.id})">加入购物车</button>
                </li> `)
            })
            arr2.forEach(item1 => {
                $('.gw').append(`
                    <li>
                       <input type="checkbox" id="" class="gwxuan">
                        <img src="${item1.img}" alt="">
                        <span>${item1.name}</span>
                        <span>${item1.price}元</span>
                        <button onclick="sub(${item1.id})">-</button>
                        <span class="shu">${item1.shu}</span>
                        <button onclick="add(${item1.id})">+</button>
                        <button onclick="rem(${item1.id})">删除</button>
                    </li>`)
                jg += item1.shu * item1.price
            })
            $('h2').html(`总价：${jg}元`)
        } rendering()
        //搜索
        function suo() {
            var inp = $('.suo')
            arr1.forEach(item => {
                if (inp.val() == '') {
                    rendering()
                } else if (inp.val() == item.name) {
                    $('.sp').html(`
                        <li>
                            <img src="${item.img}" alt="">
                            <span>${item.name}</span>
                            <span>${item.price}元</span>
                            <button onclick="jia(${item.id})">加入购物车</button>
                        </li> `)
                }
            })
            inp.val('')
        }
        //加入购物车
        function jia(id) {
            var a = arr1.find(item => item.id == id)
            arr2.push({
                id: arr2.length,
                img: a.img,
                name: a.name,
                price: a.price,
                shu: 1
            })
            rendering()
            quan($('#goods_quan'), $('.spxuan'))
            quan($('#trolley_quan'), $('.gwxuan'))
        }
        //清空购物车
        function del() {
            arr2.splice(0, Infinity)
            rendering()
            quan($('#goods_quan'), $('.spxuan'))
            quan($('#trolley_quan'), $('.gwxuan'))
        }
        //减
        function sub(i) {
            var a = arr2.filter(item => item.id == i)
            a.forEach(item2 => {
                arr2.forEach(item1 => {
                    if (item1.id == item2.id && item2.shu > 1) {
                        item2.shu--
                        item1.shu = item2.shu
                    }
                })
            })
            rendering()
            quan($('#goods_quan'), $('.spxuan'))
            quan($('#trolley_quan'), $('.gwxuan'))
        }
        //加
        function add(i) {
            var a = arr2.filter(item => item.id == i)
            a.forEach(item2 => {
                arr2.forEach(item1 => {
                    if (item1.id == item2.id && item2.shu >= 1) {
                        item2.shu++
                        item1.shu = item2.shu
                    }
                })
            })
            rendering()
            quan($('#goods_quan'), $('.spxuan'))
            quan($('#trolley_quan'), $('.gwxuan'))
        }
        //计算总价
        function sett() {
            var jg = 0
            arr2.forEach(item => {
                jg += item.shu * item.price
            })
            $('h2').html(`总价：${jg}元`)
        }
        //删除
        function rem(i) {
            var a = arr2.findIndex(item => item.id == i)
            arr2.splice(a, 1)
            rendering()
            quan($('#goods_quan'), $('.spxuan'))
            quan($('#trolley_quan'), $('.gwxuan'))
        }
        //全选
        function quan(quan, xuan) {
            quan.on('click', () => {
                if (quan.prop('checked')) {
                    xuan.prop('checked', true)
                } else {
                    xuan.prop('checked', false)
                }
            })
        }
        quan($('#goods_quan'), $('.spxuan'))
        quan($('#trolley_quan'), $('.gwxuan'))

    </script>
</body>

</html>